<template>
  <!-- PhotoAlbumDetails 相册详情 -->
  <page-meta :page-style="'overflow:' + (showSharePopup ? 'hidden' : 'visible')"></page-meta>
  <PageContainer v-model:enter-options="enterOptions">
    <view class="container">
      <Header title="相册详情" />
      <view class="info-cover">
        <TImage
          v-if="photoAlbumInfo"
          :src="photoAlbumInfo.originalCoverUrl || photoAlbumInfo.coverUrl"
          :preview="true"
          width="100%"
          height="fit-content"
          mode="widthFix"
        />
      </view>
      <view class="photo-album-ifno">
        <view class="info-name text-overflow-1">
          <text>{{ photoAlbumInfo?.name }}</text>
        </view>
        <view class="info-des">
          <text>{{ photoAlbumInfo?.desc }}</text>
        </view>
        <view class="info-time">
          <text>{{ formatToDate(photoAlbumInfo?.publishTime, 'YYYY年MM月DD日') }}发布</text>
        </view>
        <view class="info-data">
          <view class="info-data--item">
            <view class="ali-icon">&#xe6cf;</view>
            <text>{{ photoAlbumInfo?.browseNum }}人看过</text>
          </view>
          <view v-if="id" class="info-data--item">
            <LikeBtn :size="28" :param="{ sourceId: id, type: 1 }" />
          </view>
          <view
            v-if="enterOptions?.scene !== SceneValuesEnum.TIMELINE_SINGLEPAGE"
            class="info-data--item"
            @click="showSharePopup = true"
          >
            <view class="ali-icon fz-18">&#xe6b9;</view>
            <text>分享</text>
          </view>
        </view>
      </view>
      <view class="photo-list">
        <view class="photo-list--header">
          <template v-for="(v, i) in modelList" :key="i">
            <view class="photo-list--header__item" @click="setModeSwitch(v.width)">
              <view
                class="ali-icon"
                :style="{ color: imgWidth === v.width ? '#517BF6' : '#808080' }"
              >
                {{ v.icon }}
              </view>
            </view>
          </template>
        </view>

        <Paglist
          v-model="apiData"
          :is-init-api="false"
          :parame="parame"
          @register="register"
          :is-show-loadmore="false"
        >
          <Pinterest v-model="dataList" :container-height="containerHeight" />
        </Paglist>
      </view>
    </view>
  </PageContainer>
  <CustomShare
    v-if="photoAlbumInfo && enterOptions?.scene !== SceneValuesEnum.TIMELINE_SINGLEPAGE"
    v-model:visible="showSharePopup"
    @register="handleCustomShareRegister"
  />
</template>

<script lang="ts" setup>
  /**  PhotoAlbumDetails  相册详情 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { onLoad } from '@/router';
  import { ref, reactive, provide } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { formatToDate } from '@/utils/dateUtil';
  import { photoAlbumDetails, photoList } from '@/api/photoAlbum';
  import { type PhotoAlbumDetailsResult, type PhotoListResult } from '@/api/photoAlbum/types';
  import LikeBtn from '../components/LikeBtn/index.vue';
  import { onPullDownRefresh, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
  import { createMiniCode } from '@/utils/dynamicConfig';
  import { usePinterest } from '@/components/Pinterest';
  import Pinterest from '@/components/Pinterest/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { useAppShare } from '@/hooks/core/useAppShare';
  import CustomShare from '@/components/CustomShare/index.vue';
  import { useCustomShare } from '@/components/CustomShare/hooks/useCustomShare';
  import { addAppShareLog } from '@/api';
  import { getAlbumPosterData } from '../components/utils';
  import { SceneValuesEnum } from '@/enums/sceneValuesEnum';

  const photoAlbumInfo = ref<PhotoAlbumDetailsResult>();

  const enterOptions = ref<UniApp.GetLaunchOptionsSyncOptions>();

  const { createShareQuery, setWxShareTimelineQuery, setWxSharePath } =
    useAppShare();

  const showSharePopup = ref(false);
  const [
    customShareRegister,
    {
      setWxShareOptions,
      setShareLogId,
      setPosterDrawData,
      setShareTimelineContent,
      setInternalLinkOptions,
    },
  ] = useCustomShare({
    buttons: {
      share: true,
      poster: true,
      timeline: true,
      copyLink: true,
      insertOffiaccount: true,
    },
  });
  async function handleCustomShareRegister(e: any) {
    customShareRegister(e);
    if (photoAlbumInfo.value) {
      const { id, name, originalCoverUrl, coverUrl } = photoAlbumInfo.value;
      const routeQuery = createShareQuery({ id: photoAlbumInfo.value.id });
      const describe = '分享一个相册给你，来看看吧~';
      const res = await addAppShareLog({
        path: 'photoAlbumDetails',
        query: JSON.stringify(routeQuery),
      });
      setInternalLinkOptions({
        name: 'photoAlbumDetails',
        options: { id: photoAlbumInfo.value.id },
      });
      setShareLogId(res.id);
      const codeImg = await createMiniCode({ shareLogId: res.id });
      await setWxShareOptions([
        {
          path: setWxSharePath({ name: 'photoAlbumDetails', options: { id: id as number } }),
          imageUrl: originalCoverUrl ?? coverUrl, // 封面
          title: name,
        },
        {
          path: setWxSharePath({ name: 'photoAlbumDetails', options: { id: id as number } }),
          imageUrl: originalCoverUrl ?? coverUrl, // 封面
          title: describe,
        },
      ]);

      await setPosterDrawData(
        getAlbumPosterData({ name, coverUrl: originalCoverUrl ?? coverUrl, describe }, codeImg),
      );
      setShareTimelineContent({
        query: setWxShareTimelineQuery(routeQuery),
        title: name,
        imageUrl: originalCoverUrl ?? coverUrl,
      });
    }
  }

  const modelList = ref([
    {
      width: 330,
      icon: '\ue63e',
    },
    {
      width: 690,
      icon: '\ue63f',
    },
  ]);
  /** 图片宽度 */
  const imgWidth = ref(modelList.value[0].width);
  const { dataList, containerHeight, setData, setImgWidth } = usePinterest({
    imgInitWidth: imgWidth.value,
  });
  function setModeSwitch(width: number) {
    imgWidth.value = width;
    setImgWidth(width);
  }

  const parame = reactive({ belongId: 0 });
  const id = ref<number>();
  function __init() {
    if (id.value) {
      photoAlbumDetails(id.value).then((r) => (photoAlbumInfo.value = r));
      refresh?.();
    }
  }

  onLoad<'PhotoAlbumDetails'>((op) => {
    parame.belongId = op.id;
    id.value = op.id;
    __init();
  });

  onPullDownRefresh(() => {
    __init();
  });

  onShareAppMessage(() => ({}));
  onShareTimeline(() => ({}));

  /** 原始数据 */
  const apiData = ref<PhotoListResult[]>([]);
  provide('api', async (obj: any) => {
    const r = await photoList(obj);
    setData(r.records.map((v) => ({ src: v.url || v.coverUrl })));
    return r;
  });
  const [register, { refresh }] = useConList();
</script>

<style lang="scss" scoped>
  .container {
    position: relative;

    .info-cover {
      // height: 563rpx;
      overflow: hidden;
    }

    .photo-album-ifno {
      background-color: #fff;
      padding: 30rpx;
      padding-bottom: 0;
      margin-bottom: 30rpx;

      .info-name {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .info-des {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
        word-break: break-all;
      }

      .info-time {
        color: #aaabab;
        font-size: 24rpx;
        padding-bottom: 30rpx;
      }

      .info-data {
        height: 100rpx;
        border-top: 2rpx solid #ddd;
        display: flex;
        align-items: center;
        justify-content: space-around;

        &--item {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #666;

          .ali-icon {
            font-size: 32rpx;
            margin-right: 10rpx;
          }
        }
      }
    }

    .photo-list {
      &--header {
        padding: 0 30rpx;
        height: 96rpx;
        background-color: #fff;
        margin-bottom: 4rpx;
        display: flex;
        align-items: center;

        &__item {
          width: 50rpx;
          height: 50rpx;
          overflow: hidden;
          margin-right: 20rpx;
          text-align: center;
          line-height: 50rpx;

          .ali-icon {
            font-size: 40rpx;
          }
        }
      }
    }
  }
</style>
